import Taro, { Component } from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
import { post } from '../../../service/api'
import './index.scss'

class PullDown extends Component {
  constructor() {
    super(...arguments)
    this.state = {
      list: [
        {
          name: "户型",
          checked: false
        }
        ,
        {
          name: "面积",
          checked: false
        },
        {
          name: "风格",
          checked: false
        },
        {
          name: "预算",
          checked: false
        }],
      type: 0,
      unfold: false,
      selectList: [],
      arr: [], // 下拉列表
      params: {}

    }
  }
  handleTabs(item, index) {
    let unfold = true;
    let list = this.state.list;
    list.forEach(i => {
      i.checked = false
    })
    if (this.state.type == index) {
      unfold = !this.state.unfold;
    }
    list[index].checked = true;
    this.setState({
      list: list,
      type: index,
      unfold: unfold,
      arr: this.state.selectList[index]
    })
  }
  isShowMask() {
    this.setState({
      unfold: false
    })
  }
  chooseItem(item, index) {
    let { selectList, type, params } = this.state;
    const style = ['house', 'acre', 'style', 'budget']
    selectList[type].forEach(item => {
      item.checked = false
    });
    selectList[type][index].checked = true;
    this.setState({
      selectList: selectList,
      unfold: false,
    })
    if (type == 0 || type == 2) {
      params[style[type]] = index ? selectList[type][index].name : "";
    } else {
      params[style[type]] = selectList[type][index].code;
    }
    this.props.onGetInfo(params)
  }

  async componentDidMount() {
    const [res1, res2, res3, res4] = await Promise.all([
      post('dic/findList', { type: "LpHouseType" }),
      post('dic/findList', { type: "LpAcreType" }),
      post('dic/findList', { type: "TYPE_010" }),
      post('dic/findList', { type: "BudgetType" }),
    ])
    let selectList = this.state.selectList;
    if (res1.data.code == 0) {
      selectList.push(res1.data.rows)
    }
    if (res2.data.code == 0) {
      selectList.push(res2.data.rows)
    }
    if (res3.data.code == 0) {
      selectList.push(res3.data.rows)
    }
    if (res4.data.code == 0) {
      selectList.push(res4.data.rows)
    }
    selectList.forEach(item => {
      item.unshift({ name: "全部", code: "", checked: true })
      item = item.map(
        (i, index) => {
          if (index) {
            i.checked = false
            return i
          }
        }
      )
    })
    this.setState({
      selectList,
      arr: selectList[this.state.type]
    })
  }

  render() {
    const { list, type, unfold, arr } = this.state;
    return (
      <View className='pull-down'>
        <View className="tabs-list">
          {
            list.map((item, index) => {
              return (
                < View key={index} onClick={this.handleTabs.bind(this, item, index)}
                  className={item.checked ? "tabs-item tab-active" : "tabs-item"} >
                  {item.name}
                  <Image className={item.checked ? "none" : "img"} src={require("../../../asset/imgs/Path2.png")} />
                  <Image className={item.checked ? "img" : "none"} src={require("../../../asset/imgs/up-icon.png")} />
                </View>
              )
            })
          }
        </View>
        <View className={unfold ? "choose-list" : "choose-list unfold"}>
          {
            arr.map((item, index) => {
              return (
                <View className={item.checked ? "choose-item c-active" : "choose-item"}
                  key={index} onClick={this.chooseItem.bind(this, item, index)}>
                  {item.name}
                  <Image className={item.checked ? "img" : "imgno"} src={require("../../../asset/imgs/xz1.png")} />
                </View>
              )
            })
          }
        </View>
        <View className={unfold ? "masK" : "maskno"} onClick={this.isShowMask.bind(this)}></View>
      </View>
    )
  }
}

export default PullDown
